<template>
  <div class="home">
    <div class="box1">
      <dv-border-box-11 title="数据可视化平台">
        <dv-scroll-board :config="scoreConfig"
                         style="width:95%;height:58%;padding-left: 35px;padding-top: 55px"/>
      </dv-border-box-11>
    </div>
    <div class="box4">
      <h3>总成绩TOP5</h3>
      <dv-border-box-8>
        <dv-scroll-ranking-board class="salary" :config="salaryConfig"
                                 style="width:85%;height:95%;padding-top: 10px;padding-left: 25px"/>
      </dv-border-box-8>
    </div>
    <div class="box5">
      <h3>班级人数</h3>
      <dv-border-box-12>
        <dv-active-ring-chart class="major" :config="courseConfig"
                              style="width:90%;height:90%;padding-top: 20px;padding-left: 20px"/>
      </dv-border-box-12>
    </div>
    <div class="box6">
      <h3>优秀人数</h3>
      <dv-border-box-8 :reverse="true">
        <dv-capsule-chart class="job" :config="jobConfig" style="width:85%;height:80%"/>
      </dv-border-box-8>
    </div>
  </div>
</template>

<script>


import {goodPeople, scoreDataVisual, sumClazzPeople, sumScore} from "@/api/home";

export default {
    mounted() {
      this.$nextTick(() => {
        const element = document.querySelector('.active-ring-name');
        if (element) {
          element.style.cssText += 'width: 200px !important;';
        }
      });
  },

  name: 'HomeView',
  data() {
    return {
      scoreConfig: {
        header: ['班级', '学号', '姓名', '科目', '成绩', '考试时间'],
        data: [
          ['java2424', '202407001','张三', 'springboot', '90', '2024-07-11'],
          ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3']
        ],
        headerBGC: '#000000',
        evenRowBGC: '',
        oddRowBGC: '',
        align: ['center', 'center', 'center', 'center', 'center', 'center']
      },
      courseConfig: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ],
        lineWidth: 8
      },
      salaryConfig: {
        data: [

        ],
        unit: '分',
      },
      jobConfig: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 123
          },
          {
            name: '漯河',
            value: 98
          },
          {
            name: '郑州',
            value: 75
          },
          {
            name: '西峡',
            value: 66
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true
      }
    }
  },
  methods: {
    scoreVisual() {
      scoreDataVisual().then(response => {
        let scoreList = response.data.scoreList;  // [{},{},{}]
        if (Array.isArray(scoreList)) {
          let scoreData = scoreList.map(score => {   // [[],[],[]]
            return [
              score.clazz,
              score.studentNo,
              score.studentName,
              score.examContent,
              score.score,
              score.examTime
            ];
          });
          this.scoreConfig = {
            header: ['班级', '学号', '姓名', '科目', '成绩', '考试时间'],
            data: scoreData,
            headerBGC: '#000000',
            evenRowBGC: '',
            oddRowBGC: '',
            align: ['center', 'center', 'center', 'center', 'center', 'center']
          };
        } else {
          console.error("scoreList is not an array:", scoreList);
        }
      }),

          sumScore().then(response => {
            if (response.code == 0) {
              let scoreVOList = response.data.scoreVOList;
              if (Array.isArray(scoreVOList)) {
                let scoreData = scoreVOList.map(sVO => {
                  return {
                    name: sVO.studentName,
                    value: sVO.sumScore
                  };
                });
                this.salaryConfig = {
                  data: scoreData,
                  unit: "分"
                };
              } else {
                console.error("scoreVOList is not an array:", scoreVOList);
              }
            }
          });

      // 班级人数
      sumClazzPeople().then(response => {
        if (response.code == 0) {
          let sumClazzPeople1 = response.data.sumClazzPeople;
          if (Array.isArray(sumClazzPeople1)) {
            let clazzData = sumClazzPeople1.map(sVO => {
              return {
                name: sVO.className,
                value: sVO.sumStudent
              };
            });
            this.courseConfig = {
              data: clazzData,
              colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
              unit: '单位',
              showValue: true
            };
          } else {
            console.error("sumClazzPeople1 is not an array:", sumClazzPeople1);
          }
        }
      });

      // 优秀人数
      goodPeople().then(response => {
        if (response.code == 0) {
          let goodPeople = response.data.goodPeople;
          if (Array.isArray(goodPeople)) {
            let goodPeopleData = goodPeople.map(sVO => {
              return {
                name: sVO.className,
                value: sVO.sumStudent
              };
            });
            this.jobConfig = {
              data: goodPeopleData,
              lineWidth: 8
            };
          } else {
            console.error("goodPeople is not an array:", goodPeople);
          }
        }
      });
    }
  },







  created() {
    this.scoreVisual()
  }
}

</script>

<style scoped>

.home {
  height: 85vh;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background-image: url("@/assets/images/data.gif");
}

.box1, .box4, .box5, .box6 {
  padding: 0 5px;
  position: relative;
}

.box1 {
  grid-column: span 3;
}

.job {
  position: absolute;
  top: 40px;
  left: 30px;
}

h3 {
  text-align: center;
  color: white;
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
}

</style>

